<!--个人资料-->
<template>
  <el-row :gutter="24">
    <el-col :xs="24" :md="5" :lg="5">
      <div class="bg-purple">
        <div class="profile_content">
          <el-avatar :size="100" :src="profileUrl"></el-avatar>
        </div>
        <el-divider>用户名<el-tag size="mini">读者</el-tag></el-divider>
        <div class="upload_profile">
          <!-- 头像上传 -->
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-picture-outline-round avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div class="profileUpBtn">
          <el-button type="primary" @click="profileUp" round> 修改 </el-button>
        </div>
      </div>
    </el-col>
    <el-col :xs="24" :md="19" :lg="19">
      <div class="bg-purple">
        <div class="content_text">个人资料</div>
        <el-button
          class="userEdit"
          type="text"
          icon="el-icon-edit"
          @click="dialogFormVisible = true"
        >
          编辑
        </el-button>
        <!-- 用户修改对话框 -->
        <el-dialog title="修改信息" :visible.sync="dialogFormVisible" center width="30%">
          <el-form
            :rules="rules"
            ref="form"
            :model="form"
            label-position="left"
            label-width="20%"
          >
            <el-form-item label="头像">
              <el-input v-model="form.profile"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="兴趣" prop="hobby">
              <el-input v-model="form.hobby"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="about">
              <el-input type="textarea" v-model="form.about"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">修改</el-button>
          </div>
        </el-dialog>
        <el-divider></el-divider>
        <!-- 用for循环userInfo -->
        <el-row :gutter="24" v-for="(item, index) in userInfo" :key="index">
          <el-col :span="3" :offset="2" class="presion_content">
            <div>{{ item.title }}</div>
          </el-col>
          <el-col :span="15" :offset="2" class="presion_content_info">
            <div>{{ item.info }}</div>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      profileUrl:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      // 头像上传的数据
      imageUrl: "",
      userInfo: [
        { title: "昵称：", info: "暂无" },
        { title: "账号ID：", info: "暂无" },
        { title: "积分：", info: "0" },
        { title: "兴趣：", info: "暂无" },
        { title: "邮箱：", info: "暂无" },
        { title: "简介：", info: "暂无" },
        { title: "注册时间：", info: "暂无" },
      ],
      dialogFormVisible: false,
      form: {
        name: "",
        hobby: "",
        email: "",
        about: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 5, max: 10, message: "5到10位字符", trigger: "change" },
        ],
        hobby: [{ required: true, message: "请输入你的兴趣", trigger: "blur" }],
        email: [
          {
            required: true,
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    /**头像上传的 */
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    profileUp() {
      console.log(this.imageUrl + "124845");
    },
    /** /头像上传的 */
    /** 修改用户消息*/
    /** /修改用户消息*/
  },
};
</script>

<style lang="scss" scoped>
.el-col {
  margin-top: 10px;
}
.bg-purple {
  height: 100%;
  background: #ffffff;
  .profile_content {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
  }
  .upload_profile {
    display: flex;
    justify-content: center;
    margin: 20px;
  }
  .profileUpBtn {
    display: flex;
    justify-content: center;
    margin: 10px;
  }
  .content_text {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    padding: 10px;
  }
  .userEdit {
    position: relative;
    border-radius: 10px;
    left: 85%;
  }
  .presion_content {
    text-align: center;
    margin-bottom: 2%;
  }
  .presion_content_info {
    text-align: left;
    margin-bottom: 2%;
  }
}
</style>
<style lang="scss">
.avatar-uploader .el-upload {
  margin: 10px;
  border: 2px dashed #999999;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
